<template>
    <div class="Rating-gray">
        <i v-for="(item,index) in itemClass" :key="index" class='fa' :class="item"></i>
    </div>
</template>

<script>
    const LENGTH = 5; //定义星星长度，最长5个星
    const CLASS_ON = 'fa-star'; //全星对应的样式
    const CLASS_HALF = 'fa-star-half-empty'; //半星对应的样式
    const CLASS_OFF = 'fa-star-o'; //填充的样式
    export default {
        name: 'Rating',
        props: {
            rating: Number
        },
        computed: {
            itemClass() {
                let result = [];
                //对分数进行处理，向下取0.5的倍数
                let score = Math.floor(this.rating * 2) / 2;
                //控制半星
                let hasDecimal = score % 1 !== 0;
                //控制全星
                let integer = Math.floor(score);
                //全星放入数组中
                for (let i = 0; i < integer; i++) {
                    result.push(CLASS_ON);
                };
                //半星放入数组中
                if (hasDecimal) {
                    result.push(CLASS_HALF);
                }
                //补齐
                while (result.length < LENGTH) {
                    result.push(CLASS_OFF);
                }
                return result
            }
        }
    }
</script>

<style scoped>
    .Rating-gray {
        margin-right: 1.066667vw;
        color: #ffbe00;
        display: inline-block;
    }
</style>